<template>
  <div>
    <div class="contentmain">
      <div>
      <div class="paper1">
        <div class="paper1h"><h3>学术论文</h3></div>
        <el-scrollbar style="height:500px">
        <div style="padding: 0px 12px" class="ele-p1">
          <div style="padding: 40px 35px">
            <p v-for="(item) in ecardDetails.papers"><span>{{item.info}}</span></p>
          </div>
        </div>
        </el-scrollbar>
      </div>

      <div class="file1">
        <div class="paper1h"><h3>资料库</h3></div>
        <el-scrollbar style="height:350px">
        <div style="padding: 0px 6px" class="ele-p1">
          <div style="padding: 20px 15px">
              <div v-for="(item) in ecardDetails.medias" style="display: inline-block;margin-left: 20px"  @click="handlePreviews(item)">
                <div  style="width: 128px;height:128px;margin:0 auto;background-image: url('http://csfz.oss-cn-shanghai.aliyuncs.com/jjc/%E6%96%87%E4%BB%B6.png')" >
                </div>
                <div style="font-size: 18px;text-align: center;cursor: pointer;width: 128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{item.name}}</div>
              </div>

          </div>
        </div>
        </el-scrollbar>
      </div>

      </div>
    </div>


  </div>
</template>

<script>
import Nav1 from "@/components/nav";
import Foot from "@/components/foot";
export default {
  name: "Paper",
  components: {Foot,Nav1},
  props:{
    ecardDetails :{
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      fileList: [{name: 'food.doc', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.pdf', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  created(){
    console.log(this.ecardDetails);
  },
  methods:{
    handlePreviews(file){
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  },
}

</script>

<style scoped>
.el-scrollbar__bar {
  opacity: 1;
}
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
.contentmain{
  width: 1248px;
  min-height: 1000px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-around;
}
.paper1{
  width: 1000px;
  min-height: 400px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.paper1h{
  width: 100%;
  height: 45px;
  background-color:#0462C3 ;
  color: white;
  line-height: 45px;
  font-weight: bolder;
}
.file1{
  margin-top: 10px;
  width: 1000px;
  min-height: 400px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
h3{
  margin-left: 10px;
  color: whitesmoke;
}
p span{
  font-size: 20px;
}
</style>